<template>
    <section :class="cname">
        <swiper ref="mySwiper" :options="options" :not-next-tick="options.notNextTick">
            <swiper-slide v-for="(item,i) in items" :key="i">
                <router-link :to="{name:item.href}">
                    <img :src="item.src" alt="">
                </router-link>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination" v-if="options.pagination"></div>
        </swiper>
    </section>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    props: {
        cname: {
            type: String,
            default: "",
        },
        options: {
            type: Object,
            default() {
                return {
                    autoplay: true,
                    loop: true,
                    pagination: {
                        el: ".swiper-pagination",
                    },
                    notNextTick: false,
                    // 解决轮播宽度的问题。当监听该元素或者父级元素DOM发生变化时，会刷新一次
                    observeParents:true,
                    observer:true
                }
            },
        },
        items: {
            type: Array,
            default() {
                return []
            },
        },
    },
    components: {
        swiper,
        swiperSlide
    }
    }
</script>
<style lang="scss">
    .swiper-container{height: 300px!important;}
    .swiper-container img{width: 100%!important;height: 100%!important;}
</style>
